<template>
  <li class="menu-item">
    <div class="icon">
      <icon-svg :icon-class="icon" />
    </div>
    <div class="text">{{text}}</div>
  </li>
</template>

<script>
export default {
  name: 'menu-item',
  props: {
    icon: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    to: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClickItem () {
      console.log(1)
      // this.$emit('click')
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  @import "~common/style/mixins.less";

  .menu-item {
    padding: 8px 0;
    display: flex;
    align-items: center;
    color: @color-text;
    .icon-svg { font-size: calc(@font-size-large + 7px) }
    .text {
      margin-left: 8px;
      flex: 1;
      text-align: left;
      font-size: @font-size-large;
      .no-wrap()
    }
    .arrow {
      margin-right: 8px;
      color: @color-text-ll;
      svg { transform: rotate(270deg) }
    }
  }
</style>
